<!DOCTYPE html>
<style>
body {
	background-color: hsl(30,20%, 95%);
}
h1 {
	font-family: sans-serif;
	font-size: 1em;
}
script {
	display: block;
	white-space: pre;
	margin-top: -1em;
}
</style>
<link rel='stylesheet' href='railroad-diagrams.css'>
<script src='railroad-diagrams.js'></script>
<body>

<!--
<h1 id=test>TEST</h1>
<script>
Diagram(
	Choice(1, "above", AlternatingSequence(Stack("foo", "foo"), Stack("bar", "bar")), "below")).addTo();
</script>
-->

<h1 id='ident'>IDENT</h1>
<script>
ComplexDiagram(
	Choice(0, Skip(), '-'),
	Choice(0, NonTerminal('name-start char'), NonTerminal('escape')),
	ZeroOrMore(
		Choice(0, NonTerminal('name char'), NonTerminal('escape')))).addTo();
</script>
<h1 id='function'>FUNCTION</h1>
<script>
Diagram(NonTerminal('IDENT'), '(').addTo();
</script>
<h1 id='at-keyword'>AT-KEYWORD</h1>
<script>
Diagram('@', NonTerminal('IDENT')).addTo();
</script>
<h1 id='hash'>HASH</h1>
<script>
Diagram('#', NonTerminal('IDENT')).addTo();
</script>
<h1 id='string'>STRING</h1>
<script>
Diagram(
	Choice(0,
		Sequence(
			'"',
			ZeroOrMore(
				Choice(0,
					NonTerminal('not " or \\'),
					NonTerminal('escape'))),
			'"'),
		Sequence(
			"'",
			ZeroOrMore(
				Choice(0,
					NonTerminal("not ' or \\"),
					NonTerminal('escape'))),
			"'"))).addTo();
</script>
<h1 id='url'>URL</h1>
<script>
Diagram(
	Choice(0, 'u', 'U'),
	Choice(0, 'r', 'R'),
	Choice(0, 'l', 'L'),
	'(',
	Choice(1,
		Optional(NonTerminal('WS')),
		Sequence(
			Optional(NonTerminal('WS')),
			NonTerminal('STRING', '#string'),
			Optional(NonTerminal('WS'))),
		Sequence(
			Optional(NonTerminal('WS')),
			OneOrMore(
				Choice(0,
					NonTerminal('not " \' ( ) WS or NPC'),
					NonTerminal('escape'))),
			Optional(NonTerminal('WS')))),
	')').addTo();
</script>
<h1 id="number">NUMBER</h1>
<script>
Diagram(
	Choice(1, '+', Skip(), '-'),
	Choice(0,
		Sequence(
			OneOrMore(NonTerminal('digit')),
			'.',
			OneOrMore(NonTerminal('digit'))),
		OneOrMore(NonTerminal('digit')),
		Sequence(
			'.',
			OneOrMore(NonTerminal('digit')))),
	Choice(0,
		Skip(),
		Sequence(
			Choice(0, 'e', 'E'),
			Choice(1, '+', Skip(), '-'),
			OneOrMore(NonTerminal('digit'))))).addTo();
</script>
<h1>DIMENSION</h1>
<script>
Diagram(NonTerminal('NUMBER', '#number'), NonTerminal('IDENT')).addTo();
</script>
<h1>PERCENTAGE</h1>
<script>
Diagram(NonTerminal('NUMBER', '#number'), '%').addTo();
</script>
<h1>UNICODE-RANGE</h1>
<script>
Diagram(
	Choice(0,
		'U',
		'u'),
	'+',
	Choice(0,
		Sequence(OneOrMore(NonTerminal('hex digit'), Comment('1-6 times'))),
		Sequence(
			ZeroOrMore(NonTerminal('hex digit'), Comment('1-5 times')),
			OneOrMore('?', Comment('1 to (6 - digits) times'))),
		Sequence(
			OneOrMore(NonTerminal('hex digit'), Comment('1-6 times')),
			'-',
			OneOrMore(NonTerminal('hex digit'), Comment('1-6 times'))))).addTo();
</script>
<h1>COMMENT</h1>
<script>
Diagram(
	'/*',
	ZeroOrMore(
		NonTerminal("anything but * followed by /")),
	'*/').addTo();
</script>
<h1>CDO</h1>
<script>
Diagram("<" + "!--").addTo();
</script>
<h1>CDC</h1>
<script>
Diagram("-->").addTo();
</script>
<h1 id='SQL'>SQL</h1>
<script>
Diagram(
	Stack(
		Sequence(
			'SELECT',
			Optional('DISTINCT', 'skip'),
			Choice(0,
				'*',
				OneOrMore(
					Sequence(NonTerminal('expression'), Optional(Sequence('AS', NonTerminal('output_name')))),
					','
				)
			),
			'FROM',
			OneOrMore(NonTerminal('from_item'), ','),
			Optional(Sequence('WHERE', NonTerminal('condition')))
		),
		Sequence(
			Optional(Sequence('GROUP BY', NonTerminal('expression'))),
			Optional(Sequence('HAVING', NonTerminal('condition'))),
			Optional(Sequence(
				Choice(0, 'UNION', 'INTERSECT', 'EXCEPT'),
				Optional('ALL'),
				NonTerminal('select')
			))
		),
		Sequence(
			Optional(Sequence(
				'ORDER BY',
				OneOrMore(Sequence(NonTerminal('expression'), Choice(0, Skip(), 'ASC', 'DESC')), ','))
			),
			Optional(Sequence(
				'LIMIT',
				Choice(0, NonTerminal('count'), 'ALL')
			)),
			Optional(Sequence('OFFSET', NonTerminal('start'), Optional('ROWS')))
		)
	)
).addTo();
</script>

<h1 id='image-func'>image() function</h1>
<xmp>
image() = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-tags> = [ ltr | rtl ]
<image-src> = [ <url> | <string> ]</xmp>
<script>
Diagram(
	Optional(
		Sequence(
			Choice(0, "ltr", "rtl")
		)
	),
	OptionalSequence(
		Choice(0, NonTerminal("<url>"), NonTerminal("<string>")),
		NonTerminal("<color>")
	)
).addTo();
</script>

<h1 id='glob'>glob pattern</h1>
Alternating alphanums and <code>*</code> chars
<script>
Diagram(
	AlternatingSequence(
		OneOrMore(NonTerminal("alphanumeric")),
		"*"
	)
).addTo();
</script>

<h1 id='grid-auto-flow'>CSS grid-auto-flow property</h1>
<script>
Diagram(
	MultipleChoice(0, "any",
		Choice(1, "row", "column"),
		"dense"
	)
).addTo();
</script>
